<template>
  <nav class="tab-bar">
    <router-link class="tab-item" v-for="item in list" :key="item.text" :to="item.path">
      <img :src="item.selectedIcon" v-if="currentPath === item.path"/>
      <img :src="item.icon" v-else/>
      <span>{{ item.text }}</span>
    </router-link>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          text: "分类",
          selectedIcon:
            "https://m.mi.com/static/img/icon-home-selected.598ca2c8f9.png",
          icon: "https://m.mi.com/static/img/icon-home.c1947eda40.png",
          path: "/category",
        },
        {
          text: "购物车",
          selectedIcon:
            "https://m.mi.com/static/img/icon-home-selected.598ca2c8f9.png",
          icon: "https://m.mi.com/static/img/icon-home.c1947eda40.png",
          path: "/cart",
        },
        {
          text: "我的",
          selectedIcon:
            "https://m.mi.com/static/img/icon-home-selected.598ca2c8f9.png",
          icon: "https://m.mi.com/static/img/icon-home.c1947eda40.png",
          path: "/mine",
        },
      ],
    };
  },
  computed: {
    //获取当前的路由地址
    currentPath(){
      return this.$route.path;
    }
  },
  methods: {
    btnAction(){
      // console.log(this.$router);//获取当前的整个路由对象

      // console.log(this.$route); //当前路由的信息
    }
  }
};
</script>

<style></style>
